<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>消息通知</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="audit-content">
        <div class="centent-title">
          <span>消息通知</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <!-- 顶部筛选 -->
          <div class="inner-search-box">
            <div class="inner-item">
              <span class="inner-item-title">通知标题:</span>
              <el-input v-model="noticTitle" placeholder="请输入通知标题"></el-input>
            </div>
            <div class="inner-item">
              <span class="inner-item-title">通知时间:</span>
              <el-date-picker v-model="noticeCrtTm" type="date" placeholder="选择日期"></el-date-picker>
            </div>
            <button class="btn btn-primary" @click="searchList">
              <i class="iconfont icon-search"></i>
              <span>查询</span>
            </button>
            <button class="btn btn-primary" @click="addMessageNotice">
              <span>发起通知</span>
            </button>
          </div>
          <!-- 表格 -->
      <div class="inner-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column prop="serialnumber" label="序号" width="105"  type="index"></el-table-column>
          <el-table-column prop="noticTitle" label="通知标题" width="250"></el-table-column>
          <el-table-column prop="crtPsnNm" label="创建人" width="150"></el-table-column>
          <el-table-column prop="noticeObjNm" label="通知人" width="150" ></el-table-column>
          <el-table-column prop="noticeCrtTm" label="通知时间" width="100"></el-table-column>
          <el-table-column prop="noticeReadTm" label="阅读时间" width="100"></el-table-column>
          <el-table-column prop="details" label="详情">
          	<template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>

            </template>
          </el-table-column>-->

        </el-table>
      </div>

          <!-- 分页 -->
          <div class="inner-pagination">
            <el-pagination background layout="prev, pager, next" :total="dataLength"></el-pagination>
            <span class="pageInfo">当前第{{1}}页/每页10条，共{{dataLength}}条</span>
          </div>

  <el-dialog title="发起通知" :visible.sync="messageNoticeDialog" width="65%" :close-on-click-modal="true" conter>
    <!-- <div class="dialog-inner">
      <el-form ref="messageForm" label-position="conter" :model="filters" size="medium" title="发起通知">--><!--:rules="rules"-->
      <div class="centent-inner" style="padding:15px;">
        <el-form :model="filters" label-width="140px" size="small">

      <el-row :gutter="20">
        <el-col :span="10">
            <el-form-item label="通知标题" prop="noticTitle">
            <el-input v-model="filters.messageNotice.noticTitle"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="auditPrjNm">
            <el-select v-model="filters.messageNotice.auditPrjNm" filterable clearable
            allow-create default-first-option placeholder="请选择" @focus="selectProjectName()" @change="setAuditPrjId()">
              <el-option
                v-for="(item,index) in auditPrjNmList"
                :key="index"
                :label="item.auditPrjNm"
                :value="item.auditPrjId+','+item.auditPrjNm">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="审计组名称" prop="auditGrpNm">
            <el-select v-model="filters.messageNotice.auditGrpNm" filterable clearable
            allow-create default-first-option placeholder="请选择" @focus="selectAuditGrpNmList()" @change="setAuditGrpId()">
              <el-option
                v-for="(item,index) in auditGrpNmList"
                :key="index"
                :label="item.auditGrpNm"
                :value="item.auditGrpId+','+ item.auditGrpNm">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      
        <el-col :span="11">
            <el-form-item label="创建人" prop="crtPsnNm">
            <el-input v-model="filters.messageNotice.crtPsnNm" ></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
          <el-form-item label="通知人" prop="noticeObjNm">
            <el-select v-model="filters.messageNotice.noticeObjNm" filterable clearable multiple
            allow-create default-first-option placeholder="请选择" @focus="selectNoticeObjNmList()">
              <el-option
                v-for="(item,index) in noticeObjNmList"
                :key="index"
                :label="item.tOesGrpMemb.auditorNm"
                :value="item.tOesGrpMemb.auditorId+','+item.tOesGrpMemb.auditorNm" >
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通知时间" prop="rcrdCrtTm">
            <el-date-picker v-model="filters.messageNotice.rcrdCrtTm" type="datetime" placeholder="选择日期"></el-date-picker>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
            <el-form-item label="通知内容" prop="noticContent">
            <el-input v-model="filters.messageNotice.noticContent" type="textarea" :rows="4"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      
      </el-form>
      <br>
        <el-row justify="space-around" type="flex">
        <el-col :span="200"><el-button type="primary" @click="saveNotice(messageForm)">立刻发起</el-button></el-col>
      </el-row>
    </div>
   </el-dialog>

   <el-dialog title="消息详情" :visible.sync="messageNoticeDetailDialog" width="65%" :close-on-click-modal="true" conter>
    <div class="dialog-inner">
      <el-form ref="messageDetailForm" label-position="conter" :model="filters" size="medium" title="消息详情">
      <el-row :gutter="20">
        <el-col :span="20">
            <el-form-item label="通知标题" prop="noticTitle">
            <el-input v-model="filters.messageNoticeDetail.noticTitle" :disabled="true"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="40">
          <el-form-item label="项目名称" prop="auditPrjNm">
             <el-input v-model="filters.messageNoticeDetail.auditPrjNm" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="40">
          <el-form-item label="审计组名称" prop="auditGrpNm">
              <el-input v-model="filters.messageNoticeDetail.auditGrpNm" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
            <el-form-item label="创建人" prop="crtPsnNm">
            <el-input v-model="filters.messageNoticeDetail.crtPsnNm" :disabled="true"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="40">
          <el-form-item label="通知人" prop="noticeObjNm">
            <el-input v-model="filters.messageNoticeDetail.noticeObjNm" :disabled="true"></el-input>
          </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
            <el-form-item label="通知内容" prop="noticContent">
            <el-input v-model="filters.messageNoticeDetail.noticContent" type="textarea" :rows="4" :disabled="true"></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
            <el-form-item label="通知时间" prop="rcrdCrtTm">
            <el-date-picker v-model="filters.messageNoticeDetail.rcrdCrtTm" type="datetime" placeholder="选择日期" :disabled="true"></el-date-picker>
            </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <br>
        <el-row justify="space-around" type="flex">
        <el-col :span="200"><el-button type="primary" @click="messageNoticeDetailDialog = false">完成</el-button></el-col>
      </el-row>
    </div>
   </el-dialog>
   </div>
  </div>
    </div>
  </div>
</template>

<script>
//simport noticeservice from '@/api/messageNoticeApi/noticeservice'
import axios from 'axios'
import { selectNoticeList,queryTOesAuditPrj,queryTOesAuditGrp,querySameTeams,insertNotice,selectNotice} from '@/api'
export default {
  data() {
    return {
      nameValue: "", //姓名
      timeValue: "", //时间
      // 时间控件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tableData: [],
      timeValue: "", //时间选择
      input: "", //input框
      dialogVisible: false, //对话框展示状态
      nwoTableData: {},
      filters: {
         'messageNotice': {
             noticTitle:'',
             auditPrjId:'',
             auditPrjNm:'',
             auditGrpId:'',
             auditGrpNm:'',
             crtPsnNm:'',
             crtPsnId:'',
             //noticeObjNmList:[],
             noticeObjNm:[],
             noticContent:'',
             rcrdCrtTm:''
         },
         messageNoticeDetail:{

         }
      },
      userId: '',
      auditPrjId:'',
      messageNoticeDialog: false,
      messageNoticeDetailDialog: false,
      auditPrjNmList: [],
      auditGrpNmList: [],
      noticeObjNmList:[],
      noticTitle:'',
      noticeCrtTm:'',
      rules:{
          noticTitle:[
              {required: true ,message:'请输入通知标题',trigger: 'blur'}
          ],
          auditPrjNm:[
              {required: true ,message:'请选择项目',trigger: 'blur'}
          ],
          auditGrpNm:[
              {required: true ,message:'请选择审计组',trigger: 'blur'}
          ],
          crtPsnNm:[
              {required: true ,message:'请输入创建人',trigger: 'blur'}
          ],
          noticeObjNm:[
              {required: true ,message:'请选择通知人',trigger: 'blur'}
          ],
          noticContent:[
              {required: true ,message:'请输入通知内容',trigger: 'blur'}
          ],
          rcrdCrtTm:[
              {required: true ,message:'请选择通知时间',trigger: 'blur'}
          ]
      }
    };
  },
  computed: {
    dataLength() {
      return this.tableData.length;
    }
  },
  created(){
     this.userId='1001'
     this.loadNoticeList()
  },
  methods: {
    searchList(){
      this.loadNoticeList()
    },
    loadNoticeList(){
      let param = {
         noticTitle: this.noticTitle,
         noticeCrtTm:this.noticeCrtTm
      }
      // axios.post('http://localhost:7111/notice/selectNoticeList', param)
      selectNoticeList(param).then((response) => {
          console.log(response)
          // this.tableData = response.data
          this.tableData = response
        }).catch((response) => {
          console.log(response)
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchHandle() {
      console.log("查询数据");
    },
    // 查看详情
    goInfo(row) {
      this.dialogVisible = true;
      this.nwoTableData = row;
      console.log(this.nwoTableData);
    },
    //发起通知
    addMessageNotice(){
      this.messageNoticeDialog =true
      this.filters.messageNotice = {}
      this.filters.messageNotice.crtPsnNm ='彭于晏'
      console.log("211111111111")
    },
    //查询项目名称
    selectProjectName(){
       let param = {
        // userId: this.userId
         userId: '0001',
          auditGrpId: '10000001'
      }
      // axios.post('http://localhost:7111/prjInf/queryTOesAuditPrj', param)
      queryTOesAuditPrj.then((response) => {
          console.log(response)
          this.auditPrjNmList = response
          //this.auditPrjId = response.data.auditPrjId
        }).catch((response) => {
          console.log(response)
        })
    },
    //查询审计组名称
    selectAuditGrpNmList(){
       let param = {
        // userId: this.userId,
        // auditPrjId: this.auditPrjId
         userId: '0001',
          auditPrjId: '00000001'
      }
      // axios.post('http://localhost:7111/prjInf/queryTOesAuditGrp', param)
      queryTOesAuditGrp(param).then((response) => {
          console.log(response.data)
          this.auditGrpNmList = response
        }).catch((response) => {
          console.log(response)
        })
    },
    //查询通知人
    selectNoticeObjNmList(){
      console.log(this.userId)
       let param = {
          // userId: this.userId,
          // auditGrpId: this.auditGrpId,
          userId: '1001',
          auditGrpId: '10000001'
          
       }
      // axios.post('http://localhost:7111/fileShare/querySameTeams', param)
      querySameTeams(param).then((response) => {
          console.log("什么值"+response.data.noticeObjNmList);
          this.noticeObjNmList = response
          //tOesGrpMembBoList
        }).catch((response) => {
          console.log(response)
        })
    },
    setAuditPrjId(){
      this.auditPrjId = this.filters.messageNotice.auditPrjNm.split(',')[0]
      this.filters.messageNotice.auditPrjNm = this.filters.messageNotice.auditPrjNm.split(',')[1]
      console.log(this.auditPrjId)
      //this.filters.messageNotice.auditGrpNm = ''
    },
    setAuditGrpId(){
      this.auditGrpId = this.filters.messageNotice.auditGrpNm.split(',')[0]
      this.filters.messageNotice.auditGrpNm = this.filters.messageNotice.auditGrpNm.split(',')[1]
      console.log(this.auditGrpId)
    },
    tableRowClassName ({ row, rowIndex }) {
          row.index = rowIndex
    },
    //发起通知
    saveNotice(formName){
      //this.$refs[formName].validate((valid) =>{
         //if(valid){
            let param = this.filters.messageNotice
            this.filters.messageNotice.auditGrpId = this.auditGrpId
            this.filters.messageNotice.auditPrjId = this.auditPrjId
            this.filters.messageNotice.crtPsnId = this.userId
            // axios.post('http://localhost:7111/notice/insertNotice', param)
            insertNotice(param).then((response) => {
            console.log(response)
             if(response.data.resultCode=='200'){
              this.messageNoticeDialog =false
              this.$notify({
                 title: '提示',
                 message: '发起成功',
                 type: 'success'
              })
              this.loadNoticeList()
              }else{
              this.$notify({
                  title: '提示',
                  message: '发起失败',
                  type: 'warning'
              })
         }
        }).catch((response) => {
          console.log(response)
        })
      //}else{
        //return false;
      //}
    //});
  },
    //查看详情
    handleClick(row){
      console.log(row)
      let param = {
          noticObjrcdId: row.noticObjrcdId
      }
      // axios.post('http://localhost:7111/notice/selectNotice', param)
      selectNotice(param).then((response) => {
          console.log(response)
          this.messageNoticeDetailDialog =true
          this.filters.messageNoticeDetail = response
        }).catch((response) => {
          console.log(response)
        })
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
  // 搜索模块
  .inner-search-box {
    width: 100%;
    height: 32px;
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .inner-item {
      height: 32px;
      margin: 0 50px 0 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .inner-item-title {
        display: inline-block;
        margin-right: 10px;
        font: 14px/32px "PingFangSC-Regular";
        color: #333333;
      }
      /deep/.el-input {
        width: 216px;
      }
      /deep/.el-input__inner {
        width: 216px;
        height: 32px;
      }
      /deep/.el-input__icon {
        line-height: 32px;
      }
      /deep/.el-select-dropdown__item {
        font: 14px/20px "PingFangSC-Regular";
      }
    }
    .btn {
      margin-right: 20px;
    }
  }
  // 对话框
  .dialog-inner {
    /deep/.el-dialog--center .el-dialog__body {
      padding-top: 0;
    }
    .inner-item {
      font: 14px/34px "PingFangSC-Regular";
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
    }
    .log-name {
      color: #999;
      margin-right: 10px;
    }
    .log-info {
      color: #333;
    }
    .done-btn {
      width: 100%;
      height: 52px;
      margin-top: 20px;
    }
    /deep/.el-dialog--center .el-dialog__body {
      padding: 0 50px 40px;
    }
  }
  // 列表中按钮
  /deep/.el-button--small {
    padding: 0 15px;
  }
  //   对话框
  /deep/.el-dialog {
    width: 40%;
  }
}
</style>